<template>
  <div>
    <hm-header>注册</hm-header>
    <hm-log></hm-log>
    <hm-input
      placeholder="用户名/手机号码"
      v-model="username"
      :rule="/^1\d{4,10}$/"
      message="用户格式不对"
      ref="username"
    ></hm-input>
    <hm-input
      placeholder="昵称"
      v-model="nickname"
      ref="nickname"
      :rule="/^[\u4e00-\u9fa5]{3,7}$/"
      message="用户的昵称必须是3-7位的中文"
    ></hm-input>
    <hm-input
      type="password"
      placeholder="请输入密码"
      v-model="password"
      ref="password"
      :rule="/^\d{3,12}$/"
      message="用户名密码格式错误"
    ></hm-input>
    <hm-button @click="click">注册</hm-button>
  </div>
</template>

<script>
export default {
  methods: {
    click() {
      let status1 = this.$refs.username.validate(this.username)
      let status2 = this.$refs.nickname.validate(this.nickname)
      let status3 = this.$refs.password.validate(this.password)
      if (!status1 || !status2 || !status3) {
        return
      }
      this.$axios({
        method: 'post',
        url: '/register',
        data: {
          username: this.username,
          nickname: this.nickname,
          password: this.password
        }
      }).then(res => {
        if (res.data.statusCode === 200) {
          this.$toast.success(res.data.message)
          this.$router.push({
            name: '/login',
            params: { username: this.username, password: this.password }
          })
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    }
  },
  data() {
    return {
      username: '',
      nickname: '',
      password: ''
    }
  }
}
</script>

<style></style>
